<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-11-24 20:50:03
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`" class="form-item-box">
        <el-select
            v-if="!getTextModel"
            v-model="val"
            style="width: 100%"
            multiple
            clearable
            collapse-tags
            :disabled="getDisabled"
            :class="{ 'placeholder-error-tip': error }"
            :placeholder="error || getSelectPlaceholder(item)"
            v-bind="bindOptions"
        >
            <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option[item.valueKey || 'value']" />
        </el-select>

        <div v-else-if="item.isScroll" :style="item.textStyle || {}" class="">
            <!-- 防止字数过多显示换行错位，这里还是用textarea回显，移除了上面的类form-input-text -->
            <el-input v-model="textModelValue" type="textarea" readonly :rows="item.autosize ? '' : 3" :resize="item.resize || 'none'"></el-input>
        </div>
        <div v-else :style="item.textStyle || {}" class="form-input-text  g-line-1">
            {{ textModelValue || '' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'

export default {
    name: 'FormMulSelectNormal',
    mixins: [FormMixin],
    computed: {
        textModelValue() {
            // if (this.item.options) {
            //     let val = ''
            //     this.item.options.forEach(item => {
            //         if (item.value === this.value) {
            //             val = item.label
            //         }
            //     })
            //     return val
            // } else {
            //     return ''
            // }
            if (typeof this.value === 'string') {
                return this.value
            } else {
                return ''
            }
        },
        val: {
            get() {
                return this.value
            },
            set(v) {
                this.$emit('input', v)
                this._valueLink(v)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: v
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
.form-item-box ::v-deep .el-input {
    position: relative;
    width: 100%;
    height: 32px;

    .el-input__inner {
        position: absolute;
        width: 100%;
        height: 32px;
        line-height: 32px;
        padding-right: 10px;
        padding-left: 12px;
    }

    .el-input__inner:focus {
        border-color: #8d94a5;
    }
}

.el-select-dropdown__item.selected {
    color: #606266;
    font-weight: normal;
}
</style>
